<template>
  <div class="shopping-car">
    <div class="shopping-title">
      <span>购物车</span><i @click="manage">管理</i>
    </div>
    <div class="shopList">
      <!-- <van-checkbox-group v-model="checkedGroup" ref="allCheck"> -->
      <div v-for="item in shopcard" :key="item.id" class="shopItem">
        <van-checkbox
          :name="item.title"
          v-model="item.check"
          checked-color="#b90505"
          icon-size="12px"
          @change="selectOne(item)"
        ></van-checkbox>
        <van-card
          :title="item.fullName"
          :price="item.price"
          :desc="item.productInfo"
          :num="item.number"
          :thumb="'http://www.dzsyiyao.com' + item.pimage"
          @click.native.capture="goDetail(item)"
        >
        </van-card>
      </div>

      <!-- </van-checkbox-group> -->
    </div>
    <van-submit-bar
      :price="allcount * 100"
      button-text="提交订单"
      @submit="onSubmit"
      v-if="!showdelete"
    >
      <van-checkbox @click.native="checkAll" v-model="allCheck" ref="allcheck"
        >全选</van-checkbox
      >
    </van-submit-bar>
    <!-- <van-submit-bar
      :price="allcount * 100"
      button-text="提交订单"
      @submit="onSubmit"
      v-else
    >
      <van-checkbox @click.native="checkAll" v-model="allCheck" ref="allcheck"
        >全选</van-checkbox
      >
    </van-submit-bar> -->
    <div v-else class="editdelete">
      <van-checkbox @click.native="checkAll" v-model="allCheck" ref="allcheck"
        >全选</van-checkbox
      >
      <van-button
        plain
        hairline
        type="danger"
        icon="delete"
        @click.native="deleteShop"
        >删除</van-button
      >
    </div>
    <van-actionsheet v-model="showPanel" title="提交订单" class="buy-panel">
      <div class="buy-form">
        <!-- <van-card :thumb="thumb" class="buy-good-info">
          <div slot="title" class="buy-good-info-price">¥ {{ price }}</div>
          <div slot="desc">{{ name }}</div>
        </van-card> -->
        <!-- <van-cell title="购买数量：">
          <van-stepper v-model="buyCount" />
        </van-cell> -->
        <!-- <van-cell title="订单金额：" :value="totalPrice" /> -->
        <!-- <van-field v-model="remark" label="备注：" placeholder="请填写订单备注" /> -->
        <van-field
          v-model="remark"
          label="备注："
          type="textarea"
          placeholder="请填写订单备注"
          rows="1"
          autosize
        />
        <!-- <van-field v-model="consignee" label="联系人：" placeholder="请输入联系人" />
        <van-field v-model="address" label="地址：" placeholder="请输入收货地址" /> -->
        <van-button
          size="large"
          type="danger"
          @click="submitOrder"
          class="submit-btn"
          >提交订单</van-button
        >
      </div>
    </van-actionsheet>
  </div>
</template>
<script>
import api from '@/api';
const { product } = api;
//toast 我全局引用了
import {
  Checkbox,
  SubmitBar,
  Button,
  Card,
  Field,
  Cell,
  Dialog,
  Toast,
  CheckboxGroup,
  Actionsheet,
  NavBar,
} from 'vant';
export default {
  components: {
    [SubmitBar.name]: SubmitBar,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Card.name]: Card,
    [Field.name]: Field,
    [Cell.name]: Cell,
    [Dialog.name]: Dialog,
    [Toast.name]: Toast,
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Actionsheet.name]: Actionsheet,
  },
  data() {
    return {
      checkedGroup: [],
      shopcard: [],
      checked: true,
      allCheck: false,
      selectedData: [],
      showdelete: false,
      showPanel: false,
      remark: '',
      // allcount: 0,
    };
  },
  created() {
    this.getShopList();
  },
  computed: {
    allcount() {
      let sumup = 0;
      for (let i = 0; i < this.shopcard.length; i++) {
        if (this.shopcard[i].check) {
          sumup += this.shopcard[i].number * this.shopcard[i].price;
        } else {
          continue;
        }
      }

      return sumup;
    },
  },
  methods: {
    // 删除
    deleteShop() {
      if (this.selectedData && this.selectedData.length === 0) {
        Toast.fail({
          duration: 1000,
          message: '请选择商品',
        });
      } else {
        let ids = [];
        this.selectedData.forEach((item) => {
          ids.push(item.id.toString());
        });
        if (ids.length > 0) {
          product.deleteShop(ids).then((res) => {
            if (res.code === 200) {
              Toast.success('删除成功');
              this.selectedData = [];
              document.body.scrollIntoView();
            }
            this.getShopList();
            console.log(res);
          });
        }
        console.log(ids);
      }
    },

    manage() {
      this.showdelete = !this.showdelete;
    },
    // 点击跳转详情
    goDetail(val) {
      // console.log(444,val);
      this.$router.push({
        path: `/good-buy/${val.drugId}`,
        query: { name: 'shopingcar' },
      });
    },
    // 单选一个商品时
    selectOne(item) {
      let _acData = this.selectedData.find((x) => x.id == item.id);
      if (!!!_acData) {
        this.selectedData.push(item);
      } else {
        this.remove(this.selectedData, item);
      }
      let flag = true;
      this.shopcard.forEach((item) => {
        if (!item.check) flag = false;
        return;
      });
      this.allCheck = flag;
    },
    // 数组删除
    remove(arr, val) {
      let _acData = arr.find((x) => x.id == val.id);
      arr.splice(arr.indexOf(_acData), 1);
    },
    // 获取列表
    getShopList() {
      product
        .getShopList({
          page: 1,
          pageSize: 10000,
        })
        .then((res) => {
          if (res) {
            this.shopcard = res.shopCard.map(item=>{
              item.check = false;
              return item;
            })
          }
          console.log(res);
        });
      // this.shopcard = [
      //   {
      //     num: 1,
      //     price: 1999,
      //     title: '商品名商品名商品名商品商品名',
      //     desc:
      //       '商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',
      //     thumb: 'https://img.yzcdn.cn/vant/ipad.jpeg',
      //     check: false,
      //     id: 1,
      //   },
      //   {
      //     num: 2,
      //     price: 1999,
      //     title: '商品名商品名商品名商品商品名',
      //     desc:
      //       '商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',
      //     thumb: 'https://img.yzcdn.cn/vant/ipad.jpeg',
      //     check: false,
      //     id: 2,
      //   },
      // ];
    },
    // 提交订单
    onSubmit() {
      if (this.selectedData && this.selectedData.length === 0) {
        Toast.fail({
          duration: 1000,
          message: '请选择商品',
        });
      } else {
        this.showPanel = true;
      }
    },
    // 最终提交订单
    submitOrder() {
      let ids = [];
      this.selectedData.forEach((item) => {
        const data = {
          drugsId: item.drugId,
          drugId:item.drugId,
          shopCardId: item.id,
          number: item.number,
          orderPrice: (item.price * item.number * 100) / 100,
          fullName: item.fullName,
        };
        ids.push(data);
      });
      console.log({ tOrder: ids, remark: this.remark });
      if (ids.length > 0) {
        product.shopToOrder({ tOrder: ids, remark: this.remark }).then((res) => {
          console.log(res);
          if (res.code === 200) {
            Toast.success(res.msg);
            this.selectedData = [];
            document.body.scrollIntoView();
          }
          this.showPanel = false;
          this.getShopList();
        });
      }
      // console.log(ids);
    },
    // 全选
    checkAll() {
      if (this.allCheck) {
        this.shopcard.forEach((item) => {
          item.check = true;
          return item;
        });
      } else {
        this.shopcard.forEach((item) => {
          item.check = false;
          return item;
        });
      }
    },
  },
};
</script>
<style scoped>
.shopping-car {
  width: 100%;
  height: auto;
  margin-bottom: 50px;
}
.shopItem {
  display: flex;
  align-items: center;
  background-color: #fafafa;
  position: relative;
}
.shopping-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  line-height: 30px;
  padding: 0 20px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  background-color: #ffffff;
  z-index: 1;
}
.shopping-title > i {
  font-size: 16px;
  font-style: normal;
}
.buy-panel {
  font-size: 16px;
}
.shop-img {
  width: 70px;
  /* margin-top: -20px; */
}
.shopping-title > span {
  font-size: 25px;
  font-weight: bold;
}
.shopList {
  width: 100%;
  height: auto;
  padding: 20px;
  box-sizing: border-box;
  margin: 50px 0 100px;
}
.van-submit-bar {
  bottom: 49px;
  padding-left: 20px;
}
.editdelete {
  position: fixed;
  bottom: 50px;
  height: 50px;
  width: 100%;
  background-color: #fff;
  padding-left: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  line-height: 40px;
}
</style>